import { h, reactive, ref } from "vue";
import { NButton } from "naive-ui";
import { renderIcon } from "@/utils";
import { DocumentOutline, FolderOpenOutline } from "@vicons/ionicons5";

export function dataTableHelper(
  changeDir: Function,
  handlerPreview: Function,
  contextmenuEventCallback: Function
) {

  const tableData = ref()
  const tableLoading = ref(false)
  const columns = ref([
    {
      type: 'selection',
      // 文件夹不可选
      disabled: row => !row?.fileParentFolder
    },
    {
      title: '文件名',
      key: 'name',
      resizable: true,
      minWidth: 150,
      maxWidth: 350,
      ellipsis: {
        tooltip: true
      },
      render: (row) => {
        return h(NButton, {
            text: true,
            onClick: () => {
              if (!row?.fileParentFolder) {
                changeDir(row.id)
              } else {
                handlerPreview(row)
              }
            },
          },
          {
            default: () => row.name,
            icon: renderIcon(!!row?.fileParentFolder ? DocumentOutline : FolderOpenOutline)
          }
        )
      }
    },
    {
      title: '创建用户',
      key: 'createUser',
      ellipsis: {
        tooltip: true
      },
      render: (row) => {
        return h('span', {},
          {
            default: () => row?.createUser || `--`
          }
        )
      }
    },
    {
      title: '大小',
      key: 'size',
      ellipsis: {
        tooltip: true
      },
      render: (row) => {
        return h('span', {},
          {
            default: () => !!row?.fileParentFolder ? `${row.size > 0 ? row.size : '<1'}MB` : `--`
          }
        )
      }
    },
    {
      title: '创建日期',
      key: 'createTime',
      ellipsis: {
        tooltip: true
      },
      render: (row) => {
        return h('span', {},
          {
            default: () => row?.createTime || `--`
          }
        )
      }
    },
  ])
  // 行详情操作栏
  const rowDetails = reactive({
    show: false,
    style: {},
    data: {}
  })

  const rowProps = (rowData: object) => {
    return {
      /*onMouseenter: (e) => {
        console.log(e, rowData, rowIndex)
        rowDetails.show = true
        let left = e.target.children[2].getBoundingClientRect().left;
        let top = e.target.children[2].getBoundingClientRect().top;
        let right = e.target.children[4].getBoundingClientRect().right;
        let bottom = e.target.children[4].getBoundingClientRect().bottom;
        rowDetails.style = {
          left: `${left}px`,
          top: `${top+(bottom - top)/4}px`,
          width: `${(right - left)*0.9}px`,
          height: `${(bottom - top)/2}px`
        }
        rowDetails.data = rowData
      },
      onMouseleave: () => {
        rowDetails.show = false
      },*/
      onContextmenu: contextmenuEventCallback(rowData)
    }
  }

  const handler = (data) => {
    console.log(data.name)
  }

  return {
    tableData,
    tableLoading,
    columns,
    rowProps,
    rowDetails,
    handler
  }
}
